<template>
    <view class="top dispaly-just-between w-100"
        :style="{ paddingTop: systemInfo.titleTop + 'px', backgroundColor: props.bgColor }">
        <view class="left-icon">
            <view class="left-icon" v-show="props.showIcon" @click="navTo('back')">
                <tn-icon name="left" color="#000" size="40" />
            </view>
        </view>
        <view class="main-title dispaly-align-center" :style="{ height: systemInfo.sBarHeight + 'px' }">{{
            props.titleText }}</view>
        <view class="right"> </view>
    </view>
</template>

<script setup lang="ts">
import { navTo } from '@/utils/util'

interface NavProsType {
    showIcon: boolean,
    titleText: string,
    bgColor: string
}

const props = withDefaults(defineProps<NavProsType>(), {
    showIcon: true,
    bgColor: 'transparent'
})
let systemInfo = uni.getStorageSync('systemInfo')

</script>

<style lang="scss" scoped>
.top {
    box-sizing: border-box;
    position: fixed;
    z-index: 999;
    top: 0;
    left: 0;
    right: 0;
    // background: rgb(155, 227, 229);
    background: linear-gradient(180deg, rgba(155, 227, 229, 1) 0%, rgba(250, 250, 250, 1) 100%, rgba(250, 250, 250, 1) 100%);

    .left-icon {
        flex: 1;
    }

    .main-title {
        flex: 2;
        text-align: center;
    }

    .right {
        flex: 1;
    }
}
</style>